<script setup lang="ts">
import AppAuth from "@/components/layout/AppAuth.vue";
import AuthSignUp from "@/components/auth/AuthSignUp.vue";
import {definePage} from "unplugin-vue-router/runtime";

// todo: use blank layout
definePage({
  meta: {
    layout: "blank",
  },
})

</script>

<template>
  <AppAuth>
    <div class="grid mx-auto max-w-sm gap-6">
      <div class="flex flex-col text-center space-y-2">
        <h1 class="text-2xl font-semibold tracking-tight">
          Create an account
        </h1>
        <p class="text-sm text-muted-foreground">
          Enter your email below to create your account
        </p>
      </div>
      <AuthSignUp/>
      <p class="text-center text-sm text-muted-foreground">
        Already have an account?
        <RouterLink
            to="/auth/login"
            class="underline underline-offset-4 hover:text-primary"
        >
          Login
        </RouterLink>
      </p>
      <p class="px-8 text-center text-sm text-muted-foreground">
        By clicking continue, you agree to our
        <a
            href="/terms"
            class="underline underline-offset-4 hover:text-primary"
        >
          Terms of Service
        </a>
        and
        <a
            href="/privacy"
            class="underline underline-offset-4 hover:text-primary"
        >
          Privacy Policy
        </a>
        .
      </p>
    </div>
  </AppAuth>
</template>

<style scoped>

</style>
